<template>
	<div id="myfrontIndex" class="myfrontIndex">
		<el-row :gutter="20" class="row-bg" justify="center">
			<el-col :span="19">
				<el-col>
					<!-- 					<el-card class="box-card card-style" v-for="articleItem in articleListData"
					 :key="articleItem.noteId">
						<div slot="header" class="clearfix">
							<a @click="openSearch(articleItem)">
								<span class="titleStyle"> <b>{{articleItem.title}}</b></span>
							</a>
						</div>
						<div class="text">
							<div class="articleTextStyle">
								{{articleItem.summary}}
							</div>
							<div>
								<span>
									<i class="el-icon-view">12</i>
									<i class="el-icon-time" style="margin-left: 10px;">{{articleItem.createTime | formatDate}}</i>
								</span>
								<span style="float: right; ">
									<a style="margin-right: 5px;" @click="openSearch(articleItem)">浏览...</a>
								</span>
							</div>
						</div>
					</el-card> -->
					<div class="article-div-style" v-for="articleItem in articleListData" :key="articleItem.noteId">
						<a @click="openSearch(articleItem)">
							<span class="titleStyle"> <b>{{articleItem.title}}</b></span>
						</a>
						<div class="text">
							<div class="articleTextStyle">
								{{articleItem.summary}}
							</div>
							<div>
								<span>
									<i class="el-icon-view">12</i>
									<i class="el-icon-time" style="margin-left: 10px;">{{articleItem.createTime | formatDate}}</i>
								</span>
								<span style="float: right; ">
									<a style="margin-right: 5px;" @click="openSearch(articleItem)">浏览...</a>
								</span>
							</div>
						</div>
					</div>
					<el-footer>
						<div class="pagination">
							<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total_page"
							 :size="rows_page">
							</el-pagination>
						</div>
					</el-footer>
				</el-col>
			</el-col>

			<el-col :span="5">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div class="user-avator">
							<img src="../../assets/img/img.jpg">
							<div align="center" style="padding-top: 5%;">作者：自由</div>
						</div>
					</div>
					<div class="text item">
						<div><i class="el-icon-lx-read myinfo-i">文章：{{total_page}}</i><i class="el-icon-view myinfo-i">访问：2</i></div>
						<div><i class="el-icon-edit myinfo-i">评论：3</i><i class="el-icon-star-on myinfo-i">点赞：3</i></div>
					</div>
				</el-card>

				<el-card class="box-card personType">
					<div slot="header" class="clearfix personTypeTitle">
						<div class="user-avator">
							<div align="center">个人专题</div>
						</div>
					</div>
					<div class="text personTypeBody">
						<div class="personTypeRow">
							<span>python全栈开发 </span>
							<span style="float: right;">16篇</span>
						</div>
						<div class="personTypeRow">
							<span>java全栈开发</span>
							<span style="float: right;">1篇</span></div>
						<div class="personTypeRow">
							<span>C# 全栈开发</span>
							<span style="float: right;">3篇</span></div>
						<div></div>
					</div>
				</el-card>

				<el-card class="box-card personType">
					<div slot="header" class="clearfix personTypeTitle">
						<div class="user-avator">
							<div align="center">个人分类</div>
						</div>
					</div>
					<div class="text  personTypeBody">
						<div class="personTypeRow">
							<span>python </span>
							<span style="float: right;">16篇</span>
						</div>
						<div class="personTypeRow">
							<span>java</span>
							<span style="float: right;">1篇</span></div>
						<div class="personTypeRow">
							<span>C# </span>
							<span style="float: right;">3篇</span></div>
						<div></div>
					</div>
				</el-card>
				<el-card class="box-card topArticle">
					<div slot="header" class="clearfix topArticleTitle">
						<div class="user-avator">
							<div align="center">热门文章</div>
						</div>
					</div>
					<div class="text personTypeBody">
						<div class="topArticleRow">
							<span>java运行环境</span>
						</div>
						<div class="topArticleRow">
							<span>浏览量：100</span>
						</div>
						<div class="topArticleRow">
							<span>C#部署</span>
						</div>
						<div class="topArticleRow">
							<span>浏览量：23</span>
						</div>
						<div class="topArticleRow">
							<span>python开发</span>
						</div>
						<div class="topArticleRow">
							<span>浏览量：235</span>
						</div>
						<div class="topArticleRow">
							<span>关于windows运行环境</span>
						</div>
						<div class="topArticleRow">
							<span>浏览量：23</span>
						</div>
					</div>
				</el-card>


				<el-card class="box-card personType">
					<div slot="header" class="clearfix personTypeTitle">
						<div class="user-avator">
							<div align="center">归档</div>
						</div>
					</div>
					<div class="text personTypeBody">
						<div class="personTypeRow">
							<span>2019年8月 </span>
							<span style="float: right;">16篇</span>
						</div>
						<div class="personTypeRow">
							<span>2019年7月</span>
							<span style="float: right;">1篇</span>
						</div>
						<div class="personTypeRow">
							<span>2019年6月 </span>
							<span style="float: right;">1篇</span>
						</div>
						<div class="personTypeRow">
							<span>2019年4月 </span>
							<span style="float: right;">2篇</span>
						</div>
					</div>
				</el-card>

				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<div class="user-avator">
							<div align="center" style="padding-top: 5%;">友情链接</div>
						</div>
					</div>
					<div class="text item">
						<div><i class="el-icon-star-on myinfo-i">落叶的博客</i></div>
						<div><i class="el-icon-star-on myinfo-i">blog</i></div>
						<div><i class="el-icon-star-on myinfo-i">隔壁老王</i></div>
						<div></div>
					</div>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script>
	import 'quill/dist/quill.core.css';
	import 'quill/dist/quill.snow.css';
	import 'quill/dist/quill.bubble.css';
	import {
		quillEditor,
		// Quill
	} from 'vue-quill-editor';
	import * as Quill from 'quill' //引入编辑器
	import {
		constHelp
	} from '../common/contant';
	import common from '../common/common.js'
	export default {
		name: 'myfrontIndex',
		data() {
			return {
				url: {
					get_article_list: constHelp['WEBAPIURL'] + '/blogManage/get_article_list',
				},
				articleListData: [],
				cur_page: 1, //当前页
				rows_page: 10, // 一页多少条
				total_page: 0,
				cur_item: {}

			};
		},
		metaInfo: {
			title: '自由的个人博客', // set a title
			meta: [{ // set meta
				name: '自由的个人博客,技术学习,在线工具,素材收集,文章浏览,java面试题，python全栈',
				content: '自由的个人博客，向往自由，希望自己的梦想可以实现，平凡的生活，在技术的海洋里让梦想启航。'
			}],
			link: [{ // set link
				rel: 'asstes',
				href: 'http://www.mxdqh.top/'
			}]
		},
		//初期化页面
		created() {
			this.get_article_list()
		},
		filters: {
			formatDate(time) {
				var date = common.IsNull(time) ? new Date() : new Date(time);
				return common.formatDate(date, 'yyyy-MM-dd hh:mm');
			},
			formatContent(val) {
				return val;
			}
		},
		// 监听
		computed: {},
		methods: {
			// 分页导航
			handleCurrentChange(val) {
				this.cur_page = val;
				this.get_article_list();
			},
			// 获取用户文章列表
			get_article_list() {
				this.$axios.post(this.url.get_article_list, {
					page_index: this.cur_page,
					page_size: this.rows_page,
					selectWord: this.select_word,
					article_model: "1"
				}, {
					withCredentials: true
				}).then((res) => {
					if (res.data.data != null) {
						this.articleListData = res.data.data;
						this.total_page = res.data.total
					}
				})
			},
			openSearch(item) {
				let routeUrl = this.$router.resolve({
					path: '/ArticleDetail',
					name: 'ArticleDetail',
					query: item
				});
				window.location.href=routeUrl.href;
				// window.open(routeUrl.href, '_blank');
				// this.editVisible = 1;
				// this.cur_item = item;
			},
			detialtoList(visitflage) {
				this.editVisible = visitflage;
			},
		},
	};
</script>

<style>
	.myfrontIndex {
		min-height: 100px;
		min-width: 100%;
	}

	.articleTextStyle {
		max-height: 80px;
		overflow: hidden;
		margin-bottom: 10px;
	}

	.topArticleRow {
		padding: 2%;
		font-size: smaller;

	}

	.personTypeRow {
		padding: 2%;
		font-size: smaller;

	}

	.myinfo-i {
		padding: 5%;

	}

	.myfrontIndex .text {
		color: #999999;
		font-size: 11px;
	}

	.myfrontIndex .titleStyle {
		font-size: 14px;
	}

	.user-avator img {
		display: block;
		width: 40px;
		height: 40px;
		border-radius: 50%;
		float: right;
		float: right;
		padding: 3px 0
	}


	.article-div-style {
		margin: auto auto 1.5rem auto;
		border-bottom: 0.01rem solid #EBEEF5;
		/* border-radius: 10px; */
		padding: 10px 20px;
		border-bottom: 1px solid #EBEEF5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}

	.el-card__header {
		padding: 10px 20px;
		border-bottom: 1px solid #EBEEF5;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
	}
	
	/*效果四：上下左右移动 修改translate(x轴,y轴)*/
	.el-card {
		transition: All 0.4s ease-in-out;
		-webkit-transition: All 0.4s ease-in-out;
		-moz-transition: All 0.4s ease-in-out;
		-o-transition: All 0.4s ease-in-out;
	}

	.el-card:hover {
		transform: scale(0.2);
		-webkit-transform: scale(1.05);
		-moz-transform: scale(1.05);
		-o-transform: scale(1.05);
		-ms-transform: scale(1.05);
	}

	.el-card:@click {
		transform: translate(0, -10px);
		-webkit-transform: translate(0, -10px);
		-moz-transform: translate(0, -10px);
		-o-transform: translate(0, -10px);
		-ms-transform: translate(0, -10px);
	}
</style>
